<template>
  <Bubble
    content="Hello, welcome to use Ant Design X! Just ask if you have any questions."
    :avatar="{ icon: userOutlinedIcon }"
    header="Ant Design X"
    :footer="footer"
  />
</template>

<script setup name="BubbleHeaderAndFooter">
import { h } from 'vue'
import { CopyOutlined, SyncOutlined, UserOutlined } from '@ant-design/icons-vue'
import { Bubble } from 'ant-design-x-vue'
import { Button, Space, theme } from 'ant-design-vue'

const { token } = theme.useToken()
const userOutlinedIcon = h(UserOutlined)

const footer = h(Space, { size: token.value.paddingXXS }, {
  default: () => [
    h(Button, { type: 'text', size: 'small' }, {
      icon: () => h(SyncOutlined)
    }),
    h(Button, { type: 'text', size: 'small' }, {
      icon: () => h(CopyOutlined)
    })
  ]
})
</script>